<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>宇成建筑</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="../statics/css/font.css">
    <link rel="stylesheet" href="../statics/plugins/layui/css/layui.css">
    <link rel="stylesheet" href="../statics/css/xadmin.css">
    <link rel="stylesheet" href="../statics/css/style.css">
    <link rel="stylesheet" href="../statics/css/ImgCropping.css">
    <link rel="stylesheet" href="../statics/plugins/cropper/cropper.min.css">
</head>

<body class='labelAuto addPeople personnel_xq'>
    <div class="x-nav">
        <span class="layui-breadcrumb">
            <a href="welcome.html">首页</a>
            <a href="javascript:;">人力资源管理</a>
            <a>
                <cite>人员列表</cite>
            </a>
        </span>
        <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
            onclick="location.reload()" title="刷新">
            <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
        </a>
        <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right;margin-right:10px"
            onclick="window.history.go(-1)" title="后退">
            <i class="iconfontBlod" style="line-height:30px">&#xe74f;</i>
        </a>
    </div>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body search">
                        <form action="" class="layui-form">
                            <div class="layui-form-item">
                                <div class="layui-row">
                                    <div class="layui-col-xs10">
                                        <div class="layui-col-xs6">
                                            <div class="layui-inline">
                                                <label class="layui-form-label">项目</label>
                                                <div class="layui-input-block">
                                                    <select name="city" lay-verify="required" id="xiangmu">
                                                        <option value='null'>-</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs6">
                                            <div class="layui-inline">
                                                <label class="layui-form-label">工种</label>
                                                <div class="layui-input-block">
                                                    <select name="city" lay-verify="required" id="peopleType">
                                                        <option value='null'>-</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-row">
                                    <div class="layui-col-xs10">
                                        <div class="layui-col-xs6">
                                            <div class="layui-inline">
                                                <label class="layui-form-label">姓名</label>
                                                <div class="layui-input-block">
                                                    <input type="text" class="layui-input" id='name' autocomplete="off">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs6">
                                            <div class="layui-inline">
                                                <label class="layui-form-label">性别</label>
                                                <div class="layui-input-block">
                                                    <select name="city" lay-verify="required" id="gender">
                                                        <option value='null'>-</option>
                                                        <option value='1'>男</option>
                                                        <option value='2'>女</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-row">
                                    <div class="layui-col-xs10">
                                        <div class="layui-col-xs6">
                                            <div class="layui-inline">
                                                <label class="layui-form-label">工号</label>
                                                <div class="layui-input-block">
                                                    <input type="text" class="layui-input" id='jobNumber'
                                                        autocomplete="off">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs6">
                                            <div class="layui-inline">
                                                <label class="layui-form-label">民族</label>
                                                <div class="layui-input-block">
                                                    <input type="text" class="layui-input" id='nation'>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-row">
                                    <div class="layui-col-xs10">
                                        <div class="layui-col-xs6">
                                            <div class="layui-inline">
                                                <label class="layui-form-label">年龄</label>
                                                <div class="layui-input-block">
                                                    <input type="number" class="layui-input" id='age'>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs6">
                                            <div class="layui-inline">
                                                <label class="layui-form-label">银行卡号</label>
                                                <div class="layui-input-block">
                                                    <input type="number" class="layui-input" id='bankNumber'>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-row">
                                    <div class="layui-col-xs10">
                                        <div class="layui-col-xs6">
                                            <div class="layui-inline">
                                                <label class="layui-form-label">身份证号</label>
                                                <div class="layui-input-block">
                                                    <input type="text" class="layui-input" id='idcard'>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs6">
                                            <div class="layui-inline">
                                                <label class="layui-form-label">联系方式</label>
                                                <div class="layui-input-block">
                                                    <input type="text" class="layui-input" id='phone'>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-row">
                                    <div class="layui-col-xs10">
                                        <div class="layui-col-xs12">
                                            <div class="layui-inline">
                                                <label class="layui-form-label">家庭住址</label>
                                                <div class="layui-input-block" style="width: 85%;">
                                                    <input type="text" class="layui-input" id='homeAddress'
                                                           autocomplete="off">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-row">
                                    <div class="layui-col-xs10">
                                        <div class="layui-col-xs6">
                                            <div class="layui-inline">
                                                <label class="layui-form-label">签订合同时间</label>
                                                <div class="layui-input-block">
                                                    <input type="text" readonly class="layui-input" id='contractTime'>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs6">
                                            <div class="layui-inline">
                                                <label class="layui-form-label">入场教育时间</label>
                                                <div class="layui-input-block">
                                                    <input type="text" readonly class="layui-input" id='eduTime'>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-row">
                                    <div class="layui-col-xs10">
                                        <div class="layui-col-xs6">
                                            <div class="layui-inline">
                                                <label class="layui-form-label">离职时间</label>
                                                <div class="layui-input-block">
                                                    <input type="text" readonly class="layui-input" id='resignTime'>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs6">

                                        </div>
                                    </div>
                                </div>
                                <div class="layui-row">
                                    <div class="layui-col-xs10">
                                        <div class="layui-col-xs12">
                                            <div class="layui-inline">
                                                <label class="layui-form-label">工人照片</label>
                                                <div class="layui-input-block" style="height: auto;">
                                                    <button id="replaceImg" class="l-btn" type='button'>更换图片</button>
                                                    <div class='pictureContainer'>
                                                        <img id="finalImg" src="" width="100%" class='lessonCover'>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-row">
                                    <div class="layui-col-xs10">
                                        <div class="layui-col-xs12">
                                            <div class="layui-inline">
                                                <label class="layui-form-label" style="opacity: 0;">保存信息</label>
                                                <div class="layui-input-block" style="height: auto;">
                                                    <button id="save" class="layui-btn" type='button'>确定</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="layui-card-body tableCardBody">
                        <table class="layui-table" id="lists" lay-filter="test"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--图片裁剪框 start-->
    <div style="display: none" class="tailoring-container">
        <div class="black-cloth" onclick="closeTailor(this)"></div>
        <div class="tailoring-content">
            <div class="tailoring-content-one">
                <label title="上传图片" for="chooseImg" class="l-btn choose-btn">
                    <input type="file" accept="image/jpg,image/jpeg,image/png" name="file" id="chooseImg" class="hidden"
                        onchange="selectImg(this)">
                    选择图片
                </label>
                <div class="close-tailoring" onclick="closeTailor(this)">×</div>
            </div>
            <div class="tailoring-content-two">
                <div class="tailoring-box-parcel">
                    <img id="tailoringImg">
                </div>
                <div class="preview-box-parcel">
                    <p>图片预览：</p>
                    <div class="square previewImg"></div>
                    <div class="circular previewImg"></div>
                </div>
            </div>
            <div class="tailoring-content-three">
                <button class="l-btn cropper-reset-btn" type='button'>复位</button>
                <button class="l-btn cropper-rotate-btn" type='button'>旋转</button>
                <button class="l-btn cropper-scaleX-btn" type='button'>换向</button>
                <button class="l-btn sureCut" id="sureCut" type='button'>确定</button>
            </div>
        </div>
    </div>
    <!--图片裁剪框 end-->
</body>
<script src="../statics/plugins/layui/layui.js" charset="utf-8"></script>
<script src='../statics/plugins/jQuery-3.2.1/jquery-3.2.1.min.js'></script>
<script type="text/javascript" src="../statics/plugins/X-admin/xadmin.js"></script>
<script type="text/javascript" src="../statics/js/public.js?v=1129"></script>
<script src="../statics/plugins/cropper/cropper.min.js"></script>
<script type="text/javascript">
    layui.use(['form', 'layer', "table", "laydate"], function () {
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        var layer = layui.layer;
        $('#xiangmu').empty().html(projectSelect());
        $('#peopleType').empty().html(professionSelect());
        $.ajax({
            url: url + '/hrm/employee/info',
            type: "post",
            data: {
                id:Number(localStorage.getItem('personnelList_detail-id')),
                token:getToken()
            },
            async:false,
            dataType: "json",
            success: function(r) {
                if(r.code == 100000) {
                    selects($('#xiangmu option'), r.data.projectId);
                    selects($('#peopleType option'), r.data.professionId);
                    selects($('#gender option'), r.data.gender);

                    $('#contractTime').val(r.data.contractTime?r.data.contractTime.substr(0,10):'');
                    $('#eduTime').val(r.data.eduTime?r.data.eduTime.substr(0,10):'');
                    $('#resignTime').val(r.data.resignTime?r.data.resignTime.substr(0,10):'');
                    $('#name').val(r.data.name);
                    $('#age').val(r.data.age);
                    $('#nation').val(r.data.nation);
                    $('#idcard').val(r.data.idcard);
                    $('#phone').val(r.data.phone);
                    $('#bankNumber').val(r.data.bankNumber);
                    $('#homeAddress').val(r.data.homeAddress);
                    $('#jobNumber').val(r.data.jobNumber);
                    $('#hasAttendance').html(r.data.hasAttendance);
                    $('#dayValue').html(r.data.dayValue);
                    $('#professionName').val(r.data.professionName);
                    if (r.data.image != null && r.data.image != undefined && r.data.image != "") {
                        var image = `
                            <img src=${url + r.data.image} alt='工人头像'>
                        `
                        $('.unamePic').html(image);
                    }
                }else{
                    tips('详情',r)
                }
            }
        })
        form.render();
        laydate.render({
            elem: '#contractTime' //指定元素
        });
        laydate.render({
            elem: '#eduTime' //指定元素
        });
        laydate.render({
            elem: '#resignTime' //指定元素
        });
        $('body').on('click','#save',function(){
            var resignTime=$('#resignTime').val();
            var eduTime=$('#eduTime').val();
            var contractTime=$('#contractTime').val();
            var projectId=Number($('#xiangmu option:selected').val());
            var professionId=Number($('#peopleType option:selected').val());
            var name=$('#name').val();
            var idcard=$('#idcard').val();
            var jobNumber=$('#jobNumber').val();
            var gender=Number($('#gender option:selected').val());
            var age=Number($('#age').val());
            var nation=$('#nation').val();
            var phone=$('#phone').val();
            var bankNumber=$('#bankNumber').val();
            var homeAddress=$('#homeAddress').val();
            var file = $('#finalImg').attr('src');
            $.ajax({
                url: url+'/hrm/employee/edit',
                type: "post",
                // contentType: 'application/json',
                data: {
                    id:Number(localStorage.getItem('personnelList_detail-id')),
                    eduTime:eduTime,
                    resignTime:resignTime,
                    contractTime:contractTime,
                    projectId:projectId,
                    professionId:professionId,
                    name:name,
                    idcard:idcard,
                    jobNumber:jobNumber,
                    gender:gender,
                    age:age,
                    nation:nation,
                    phone:phone,
                    bankNumber:bankNumber,
                    homeAddress:homeAddress,
                    file:file,
                    token:getToken()
                },
                success:function(r){
                    if(r.code==100000){
                        tips('编辑工人',r);
                        setTimeout(function(){
                            // window.history.go(-1);
                        },1000)
                    }else{
                        tips('编辑工人',r);
                    }
                }
            })
        })
    });
    //弹出框水平垂直居中

    window.onresize = function () {
        var win_height = $(window).height();
        var win_width = $(window).width();
        if (win_width <= 768) {
            $(".tailoring-content").css({
                "top": (win_height - $(".tailoring-content").outerHeight()) / 2,
                "left": 0
            });
        } else {
            $(".tailoring-content").css({
                "top": (win_height - $(".tailoring-content").outerHeight()) / 2,
                "left": (win_width - $(".tailoring-content").outerWidth()) / 2
            });
        }
    };
    //弹出图片裁剪框
    $("#replaceImg").on("click", function () {
        $(".tailoring-container").toggle();
    });
    //图像上传
    function selectImg(file) {
        if (!file.files || !file.files[0]) {
            return;
        }
        var reader = new FileReader();
        reader.onload = function (evt) {
            var replaceSrc = evt.target.result;
            //更换cropper的图片
            $('#tailoringImg').cropper('replace', replaceSrc, false); //默认false，适应高度，不失真
        }
        reader.readAsDataURL(file.files[0]);
    }
    //cropper图片裁剪
    $('#tailoringImg').cropper({
        aspectRatio: 1 / 1, //默认比例
        preview: '.previewImg', //预览视图
        guides: false, //裁剪框的虚线(九宫格)
        autoCropArea: 0.5, //0-1之间的数值，定义自动剪裁区域的大小，默认0.8
        movable: false, //是否允许移动图片
        dragCrop: true, //是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域
        movable: true, //是否允许移动剪裁框
        resizable: true, //是否允许改变裁剪框的大小
        zoomable: false, //是否允许缩放图片大小
        mouseWheelZoom: false, //是否允许通过鼠标滚轮来缩放图片
        touchDragZoom: true, //是否允许通过触摸移动来缩放图片
        rotatable: true, //是否允许旋转图片
        crop: function (e) {
            // 输出结果数据裁剪图像。
        }
    });
    //旋转
    $(".cropper-rotate-btn").on("click", function () {
        $('#tailoringImg').cropper("rotate", 45);
    });
    //复位
    $(".cropper-reset-btn").on("click", function () {
        $('#tailoringImg').cropper("reset");
    });
    //换向
    var flagX = true;
    $(".cropper-scaleX-btn").on("click", function () {
        if (flagX) {
            $('#tailoringImg').cropper("scaleX", -1);
            flagX = false;
        } else {
            $('#tailoringImg').cropper("scaleX", 1);
            flagX = true;
        }
        flagX != flagX;
    });

    //裁剪后的处理
    $("#sureCut").on("click", function () {
        if ($("#tailoringImg").attr("src") == null) {
            return false;
        } else {
            var cas = $('#tailoringImg').cropper('getCroppedCanvas'); //获取被裁剪后的canvas
            var base64url = cas.toDataURL('image/png'); //转换为base64地址形式
            $("#finalImg").prop("src", base64url); //显示为图片的形式
            //关闭裁剪框
            closeTailor();
        }
    });
    //关闭裁剪框
    function closeTailor() {
        $(".tailoring-container").toggle();
    }
</script>

</html>